<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#me").position().top; //<div id="me">를 가장 위 layer에 놓는다.
	$("body").on("keypress", function(event) {
		//alert(event.keyCode); // 혹은 event.which 
		if(event.which==50){ //아래쪽 화살표
			$("#me").animate({"margin-top":"+=10"}, 30);
			animateStop();
		}
		if(event.which==54){ //오른쪽 화살표
			$("#me").animate({"margin-left":"+=10"}, 30);
			animateStop();
		}
		if(event.which==56){ //위쪽 화살표
			$("#me").animate({"margin-top":"-=10"}, 30);
			animateStop();
		}
		if(event.which==52){ //왼쪽 화살표
			$("#me").animate({"margin-left":"-=10"}, 30);
			animateStop();
		}
		
	});
		$("map").on("mouseover", function(event){
			//alert("?");
			$("#me").hide();
		});
});
function animateStop(){
	$("body").on("keyup", function(){
		$("#me").stop();
	});
}
</script>
<style type="text/css">
body{
	 width: 1000px;
	 height: 1000px;
	 margin: 0;
	 /*background-color: black;*/
	/* ** 배경화면에 이미지를 설정할 경우
	background-image:url("/cost_of_living/blackhole.png");
	background-repeat : no-repeat;
	<body>태크 안에 직접 설정가능 : background="/cost_of_living/blackhole.png"
	*/
}
#me{
	width: 10px;
	height: 10px;
	margin: 50px;
	background-color: yellow;
	position: absolute; /* layer(div, img 등)이 겹치도록 설정 */
}
#blackhole{
	margin: 0;
}
</style>
</head>
<body >
<div id="me"></div>
<img id="blackhole" src="/cost_of_living/blackhole.jpeg" usemap="#eventHorizon">
<map name="eventHorizon">
	<area shape="circle" coords="790, 561, 156" alt="event horizon" href="freefromSth.jsp">
</map>
</body>
</html>